<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div v-if="ind == 1" class="boxLogin f f-a-c f-j-c">
			<div class="topTit">
				<div class="name">Forgot your password?</div>
				<div class="count">Enter the email address associated with your account, and we’ll email you a link to reset your password.</div>
				<div class="inpBox">
					<div class="inpTit">Email</div>
					<input type="text" class="inp" placeholder="Enter your email address" v-model="email" name="" id="" />
				</div>
				<!-- btn -->
				<div @click="endMessage" class="btn">Send reset link</div>
				<div class="botSignUp f f-a-c f-j-c">Come to think of it? <span @click="goLogin" class="hand">Return to Sign in</span></div>
			</div>
		</div>
		<div v-else class="boxLogin f f-a-c f-j-c">
			<div class="topTitsss">A link to reset your password has been sent to {{ email }}.</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ResetPassword } from "@/api/login.js";
	import { ref, onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let email = ref("");
	let route = useRoute();
	let emils = ref("");
	let act = route.query.act;
	let ind = ref(1);
	let password = ref("");
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const goLogin = () => {
		router.replace("/Login");
	};
	const endMessage = async () => {
		ind.value = 2;
		let n = await ResetPassword({ email: email.value, path: `http://www.xpertbay.com/Login/UpdataPassword?email=${email.value}&act=${act}` });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			//更改密码
		}
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
